import React, { useEffect, useState } from "react";
import "./Button.scss";
import { FlylineChart, BorderBox11, ScrollBoard, ConicalColumnChart, ScrollRankingBoard } from "@jiaminghi/data-view-react";
import { Row, Col } from "antd";
function Button() {
    const config = {
        centerPoint: [0.48, 0.35],
        points: [
            {
                position: [0.52, 0.235],
                text: "新乡",
            },
            {
                position: [0.43, 0.29],
                text: "焦作",
            },
            {
                position: [0.59, 0.35],
                text: "开封",
            },
            {
                position: [0.53, 0.47],
                text: "许昌",
            },
            {
                position: [0.45, 0.54],
                text: "平顶山",
            },
            {
                position: [0.36, 0.38],
                text: "洛阳",
            },
            {
                position: [0.62, 0.55],
                text: "周口",
            },
            {
                position: [0.56, 0.56],
                text: "漯河",
            },
            {
                position: [0.37, 0.66],
                text: "南阳",
            },
            {
                position: [0.55, 0.81],
                text: "信阳",
            },
            {
                position: [0.55, 0.67],
                text: "驻马店",
            },
            {
                position: [0.37, 0.29],
                text: "济源",
            },
            {
                position: [0.2, 0.36],
                text: "三门峡",
            },
            {
                position: [0.76, 0.41],
                text: "商丘",
            },
            {
                position: [0.59, 0.18],
                text: "鹤壁",
            },
            {
                position: [0.68, 0.17],
                text: "濮阳",
            },
            {
                position: [0.59, 0.1],
                text: "安阳",
            },
        ],
        bgImgUrl: "/map.jpg", // 从public目录开始
        centerPointImg: {
            url: "/mapCenterPoint.png",
        },
        pointsImg: {
            url: "/mapPoint.png",
        },
    };
    const [a, setAa] = useState(0);
    useEffect(() => {
        setAa(a + 1)
    }, [])
    const config1 = {
        data: [
            ['行1列1', '行1列2', '行1列3'],
            ['行2列1', '行2列2', '行2列3'],
            ['行3列1', '行3列2', '行3列3'],
            ['行4列1', '行4列2', '行4列3'],
            ['行5列1', '行5列2', '行5列3'],
            ['行6列1', '行6列2', '行6列3'],
            ['行7列1', '行7列2', '行7列3'],
            ['行8列1', '行8列2', '行8列3'],
            ['行9列1', '行9列2', '行9列3'],
            ['行10列1', '行10列2', '行10列3']
        ]
    }
    const config2 = {
        data: [
            {
                name: '汽车',
                value: 55
            },
            {
                name: '火箭',
                value: 120
            },
            {
                name: '高铁',
                value: 71
            },
            {
                name: '轮船',
                value: 66
            },
            {
                name: '飞机',
                value: 80
            },
            {
                name: '麋鹿',
                value: 35
            },
            {
                name: '跑步',
                value: 15
            }
        ],
        img: [
            '/img/1st.png',
            '/img/2st.png',
            '/img/3st.png',
            '/img/4st.png',
            '/img/5st.png',
            '/img/6st.png',
            '/img/7st.png'
        ]
    }
    const config3 = {
        data: [
            {
                name: '汽车',
                value: 55
            },
            {
                name: '火箭',
                value: 120
            },
            {
                name: '高铁',
                value: 71
            },
            {
                name: '轮船',
                value: 66
            },
            {
                name: '飞机',
                value: 80
            },
            {
                name: '麋鹿',
                value: 35
            },
            {
                name: '跑步',
                value: 15
            }
        ]
    }
    return (
        <div className="datav" style={{ margin: '20px' }}>
            <BorderBox11 key={a} title="飞星图" >
                <Row style={{ marginTop: '20px' }}>
                    <Col span={12}>
                        <FlylineChart
                            dev={true}
                            key={a}
                            config={config}
                            style={{ width: "100%", height: "300px" }}
                        />

                    </Col>
                    <Col span={12}>
                        <ScrollBoard config={config1} style={{ width: '100%', height: '300px' }} />
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <ConicalColumnChart config={config2} style={{ width: '100%', height: '300px' }} />
                    </Col>
                    <Col span={12}>
                        <ScrollRankingBoard config={config3} style={{ width: '100%', height: '300px' }} />
                    </Col>
                </Row>
            </BorderBox11>
        </div>
    );
}
export default Button;